<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>北京冬奥会监测与反馈系统</title>
    <base href="${ctxPath}/">
    <script type="text/javascript" src="js/bigdata/jquery.js"></script>
    <link rel="stylesheet" href="css/bigdata/comon0.css">
</head>
<script>        
    $(window).load(function () {
        $(".loading").fadeOut()
    })


    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({ fontSize: whei / 20 })
        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 20 })
        });
    });
</script>
<script type="text/javascript" src="js/bigdata/echarts.min.js"></script>
<script language="JavaScript" src="js/bigdata/js.js"></script>
<body>
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" src="js/bigdata/index.html" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"> <img src="images/bigdata/loading.gif"> 页面加载中... </div>
</div>
<div class="head">
    <h1>北京冬奥会监测与反馈系统</h1>
    <div class="weather"><!--<img src="images/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>

    <script>
        var t = null;
        t = setTimeout(time, 1000);
        function time() {
            clearTimeout(t);
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000);
        }

    </script>


</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle"></div>
                <div class="allnav">
                    <div style="width: 50%">
                        <div style="color: #0e94eb;font-size: 25px;margin-top: 22%;margin-left: 20%">30℃
                        </div>
                        <div style="color: #0e94eb;font-size: 25px;margin-top: 22%;margin-left: 20%">20%rh</div>
                    </div>
                    <div id="echart1" style="width: 100%;height: 100%;margin-top: -110px;padding-left: 120px"></div>

                </div>

                <div class="boxfoot"></div>

            </div>

            <div class="boxall" style="height: 6.5rem">
                <div class="alltitle"></div>
                <div class="allnav" id="echart2">
                    <div class="layui-form">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="18%">
                                <col width="10%">
                                <col width="12%">
                                <col width="12.5%">
                                <col width="12.5%">
                                <col width="10%">
                                <col width="10%">
                                <col width="10%">

                            </colgroup>
                            <thead>
                            <tr>
                                <th style="color: #0e94eb">传感器类型</th>
                                <th style="color: #0e94eb">编号</th>
                                <th style="color: #0e94eb">实时数据</th>
                                <th style="color: #0e94eb">检测时间</th>
                                <th style="color: #0e94eb">平均值</th>
                                <th style="color: #0e94eb">最大值</th>
                                <th style="color: #0e94eb">最小值</th>
                                <th style="color: #0e94eb">状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                            </tr>
                            <tr>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                                <td style="color: #0e94eb"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter">12581189</li>
                        <li class="pulll_left counter">3912410</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">2020年总数据</li>
                        <li class="pulll_left">2019年总数据</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"><img src="images/bigdata/lbx.png"></div>
                <div class="map2"><img src="images/bigdata/jt.png"></div>
                <div class="map3"><img src="images/bigdata/map.png"></div>
                <div class="map4" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:3.4rem">
                <div class="alltitle">振弦数据</div>
                <div class="allnav" id="echart5"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">激光数据</div>
                <div class="allnav" id="echart6"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3rem">
                <div class="alltitle">光纤数据</div>
                <div class="allnav" id="echart4"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<div class="back"></div>


<script type="text/javascript" src="js/bigdata/china.js"></script>
<script type="text/javascript" src="js/bigdata/area_echarts.js"></script>
<script>
    $(function(){
        var dom = document.getElementById("echart1");
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;
        var colors = ['#5793f3', '#d14a61', '#675bba'];

        var dataArr = 44;
        var colorSet = {
            color: '#468EFD'
        };
        option = {
            backgroundColor: '#0E1327',
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },

            series: [{
                name: "内部进度条",
                type: "gauge",
                // center: ['20%', '50%'],
                radius: '40%',

                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [
                            [dataArr / 100, colorSet.color],
                            [1, "#111F42"]
                        ],
                        width: 8
                    }
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,

                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    formatter: function(value) {
                        if (value !== 0) {
                            var num = Math.round(value ) ;
                            return parseInt(num).toFixed(0)+"m/s";
                        } else {
                            return 0;
                        }
                    },
                    offsetCenter: [0, 82],
                    textStyle: {
                        padding: [0, 0, 0, 0],
                        fontSize: 18,
                        fontWeight: '700',
                        color: colorSet.color
                    }
                },
                title: { //标题
                    show: true,
                    offsetCenter: [0, 46], // x, y，单位px
                    textStyle: {
                        color: "#fff",
                        fontSize: 14, //表盘上的标题文字大小
                        fontWeight: 400,
                        fontFamily: 'PingFangSC'
                    }
                },
                data: [{
                    name: "风速",
                    value: dataArr,
                }],
                pointer: {
                    show: true,
                    length: '75%',
                    radius: '20%',
                    width: 10, //指针粗细
                },
                animationDuration: 4000,
            },
                {
                    name: '外部刻度',
                    type: 'gauge',
                    //  center: ['20%', '50%'],
                    radius: '50%',
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [
                                [1, 'rgba(0,0,0,0)']
                            ]
                        }
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: '#4d5bd1',
                        distance: 25,
                        formatter: function(v) {
                            switch (v + '') {
                                case '0':
                                    return '0';
                                case '10':
                                    return '10';
                                case '20':
                                    return '20';
                                case '30':
                                    return '30';
                                case '40':
                                    return '40';
                                case '50':
                                    return '50';
                                case '60':
                                    return '60';
                                case '70':
                                    return '70';
                                case '80':
                                    return '80';
                                case '90':
                                    return '90';
                                case '100':
                                    return '100';
                            }
                        }
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                        }
                    }, //分隔线样式
                    detail: {
                        show: false
                    },
                    pointer: {
                        show: false
                    }
                },
            ]
        };

        myChart.setOption(option, true);

    })
</script>


</body>
</html>
